<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/atlantis.min.css">
    <title>eg：</title>
    <style>
        #demo{
            position: absolute;
            top:70px;
            left: 260px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
    <div class="wrapper">
        <div class="main-header">
            <!-- Logo Header -->
            <div class="logo-header" data-background-color="blue">

                <a href="../index.html" class="logo">
                    <img src="../images/logo.svg" alt="navbar brand" class="navbar-brand">
                </a>
                <button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse" data-target="collapse" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon">
						<i class="icon-menu"></i>
					</span>
                </button>
                <button class="topbar-toggler more"><i class="icon-options-vertical"></i></button>
                <div class="nav-toggle">
                    <button class="btn btn-toggle toggle-sidebar">
                        <i class="icon-menu"></i>
                    </button>
                </div>
            </div>
            <!-- End Logo Header -->

            <!-- Navbar Header -->
            <nav class="navbar navbar-header navbar-expand-lg" data-background-color="blue2">
                <div class="container-fluid">
                    <div class="collapse" id="search-nav">
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="nav navbar-nav" id="headerNav" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active " id="navMainPage" href="#navMainPageDiv" data-toggle="tab"  role="tab" aria-controls="navMainPage" aria-selected="false"> 测试 </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="navTechPage" href="#navTechPageDiv" data-toggle="tab"  role="tab" aria-controls="navTechPage" aria-selected="false"> 测试1 </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="navFoodPage" href="#navFoodPageDiv" data-toggle="tab"  role="tab" aria-controls="navFoodPage" aria-selected="false"> 测试2 </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
            <!-- End Navbar -->
        </div>
    </div>

    <!-- Sidebar -->
    <div class="sidebar sidebar-style-2">
        <div class="sidebar-wrapper scrollbar scrollbar-inner">
            <div class="tab-content">
                <div class="tab-pane fade active show" id="navMainPageDiv" role="tabpanel" aria-labelledby="navMainPage">
                    <ul class="nav nav-primary">
                        <li class="nav-section">
							<span class="sidebar-mini-icon">
								<i class="fa fa-ellipsis-h"></i>
							</span>
                            <h4 class="text-section">Components</h4>
                        </li>
                        <li class="nav-item">
                            <a data-toggle="collapse" href="#base">
                                <i class="fas fa-layer-group"></i>
                                <p>Base</p>
                                <span class="caret"></span>
                            </a>
                            <div class="collapse show" id="base">
                                <ul class="nav nav-collapse">
                                    <li>
                                        <a href="index.html">
                                            <span class="sub-item">Avatars</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="components/buttons.html">
                                            <span class="sub-item">Buttons</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="tab-pane fade" id="navTechPageDiv" role="tabpanel" aria-labelledby="navTechPage">
                    <ul class="nav nav-primary">
                        <li class="nav-section">
							<span class="sidebar-mini-icon">
								<i class="fa fa-ellipsis-h"></i>
							</span>
                            <h4 class="text-section">Components</h4>
                        </li>
                        <li class="nav-item">
                            <a data-toggle="collapse" href="#base1">
                                <i class="fas fa-layer-group"></i>
                                <p>Base111</p>
                                <span class="caret"></span>
                            </a>
                            <div class="collapse" id="base1">
                                <ul class="nav nav-collapse">
                                    <li>
                                        <a href="components/avatars.html">
                                            <span class="sub-item">Avatars</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="components/buttons.html">
                                            <span class="sub-item">Buttons</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="tab-pane fade" id="navFoodPageDiv" role="tabpanel" aria-labelledby="navFoodPage">
                    <ul class="nav nav-primary">
                        <li class="nav-section">
							<span class="sidebar-mini-icon">
								<i class="fa fa-ellipsis-h"></i>
							</span>
                            <h4 class="text-section">Components</h4>
                        </li>
                        <li class="nav-item">
                            <a data-toggle="collapse" href="#base2">
                                <i class="fas fa-layer-group"></i>
                                <p>Base222</p>
                                <span class="caret"></span>
                            </a>
                            <div class="collapse" id="base2">
                                <ul class="nav nav-collapse">
                                    <li>
                                        <a href="components/avatars.html">
                                            <span class="sub-item">Avatars</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="components/buttons.html">
                                            <span class="sub-item">Buttons</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
    <div id="demo">demo</div>
</body>
</html>

<script src="../js/jquery.3.2.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/bootstrap.bundle.min.js"></script>
<script>
</script>
